<!--
 * @Author: wangyu
 * @Date: 2024-12-27 13:53:26
 * @LastEditTime: 2024-12-27 15:28:51
 * @LastEditors: wangyu
 * @Description: business弹窗
 * @FilePath: \dzsq-smartpark-platform\src\views\detailed\components\businessDialog.vue
-->
<template>
  <div v-show="status" class="businessDialog" @click="close">
    <div>
      <div class="businessDialog-content">
        <div>
          <header>当前租赁企业:</header>
          <div class="businessDialog-content-info">
            <div>
              <img src="@/assets/imgs/u526_div.png" />
            </div>
            <div>
              <div>
                <div>企业名称：</div>
                <div>
                  {{ data.qymc }}
                  <div style="float: right">
                    <el-button type="primary" link @click.stop="">
                      查看地址
                    </el-button>
                  </div>
                </div>
              </div>
              <div>
                <div>法人：</div>
                <div>{{ data.qyfr }}</div>
              </div>
              <div>
                <div>联系方式：</div>
                <div>{{ data.qyfr }}</div>
              </div>
              <div>
                <div>当前状态：</div>
                <div>
                  {{ data.dqzt }}
                  <div style="float: right">
                    <el-button type="primary" link @click.stop="">
                      租赁历史
                    </el-button>
                  </div>
                </div>
              </div>
              <div>
                <div>租金状态：</div>
                <div>
                  {{ data.zjzt }}
                  <div style="float: right">
                    <el-button type="primary" link @click.stop="">
                      账目清单
                    </el-button>
                  </div>
                </div>
              </div>
              <div>
                <div>邮箱：</div>
                <div>
                  {{ data.yx }}
                  <div style="float: right">
                    <el-button type="primary" link @click.stop="">
                      发送邮件
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <header>历史租赁企业:</header>
          <div class="businessDialog-content-table" @click.stop>
            <div>
              <div class="header">
                <div>企业名称</div>
                <div>社会信用代码</div>
                <div>企业法人</div>
                <div>联系方式</div>
                <div>历史租赁</div>
                <div>状态</div>
                <div>操作</div>
              </div>
              <vue3-seamless-scroll
                :list="data.history"
                class="list"
                :step="0.3"
                :hover="true"
              >
                <ul v-for="item in data.history" :key="item.name">
                  <li>{{ item.name }}</li>
                  <li>{{ item.shxydm }}</li>
                  <li>{{ item.qyfr }}</li>
                  <li>{{ item.lxfs }}</li>
                  <li :title="item.lszl">{{ item.lszl }}</li>
                  <li class="zt" :class="item.zt">
                    <el-tag
                      v-if="item.zt === '正常'"
                      class="ml-2"
                      type="success"
                      >{{ item.zt }}</el-tag
                    >
                    <el-tag
                      v-else-if="item.zt === '异常'"
                      class="ml-2"
                      type="danger"
                      >{{ item.zt }}</el-tag
                    >
                  </li>
                  <li><el-button type="primary" plain>导出</el-button></li>
                </ul>
              </vue3-seamless-scroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const status = ref(false);
const data = ref({});

const open = (row) => {
  console.log(row);
  data.value = row;
  status.value = true;
};
const close = () => {
  status.value = false;
};
defineExpose({
  open,
  close,
});
</script>
<style scoped lang="scss">
.businessDialog {
  position: fixed;
  font-size: 16px;
  width: 1032px;
  height: 663px;
  top: 50%;
  left: 50%;
  background-image: url(@/assets/imgs/底色_u1404.svg);
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate(-50%, -50%);
  z-index: 999;
  &-content {
    position: absolute;
    top: 64px;
    left: 24px;
    right: 24px;
    header {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 16px;
    }
    &-info {
      display: flex;
      width: 100%;
      height: 210px;
      margin-top: 16px;
      margin-bottom: 16px;
      align-items: center;
      > div {
        > img {
          width: 480px;
          height: 210px;
        }
        &:first-child {
          width: 480px;
        }
        &:last-child {
          flex: 1;
          margin-left: 16px;
          > div {
            display: flex;
            align-items: center;
            line-height: 32px;
            > div {
              width: 160px;
              &:last-child {
                height: 32px;
                line-height: 32px;
                flex: 1;
              }
            }
          }
        }
      }
    }
    &-table {
      display: flex;
      font-size: 16px;
      flex-direction: column;
      height: calc(100% - 242px);

      .list {
        width: 100%;
      }
      .header {
        display: flex;
        align-items: center;
        background-color: rgba(238, 251, 255, 0.1);
        overflow: hidden;
        > div {
          flex: 1;
          line-height: 36px;
          height: 36px;
          text-align: center;
        }
      }
      .list {
        height: 200px;
        overflow: hidden;
        ul {
          display: flex;
          align-items: center;
          padding-inline-start: 0px;
          list-style-type: none;
          background-color: rgba(236, 236, 236, 0.1);

          > li {
            flex: 1;
            text-align: center;
            line-height: 32px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
      .normal {
        color: #19be6b;
      }

      .zjwjq {
        color: #ffa94c;
      }
      .zjqj {
        color: #fb6260;
      }
    }
  }
  > div {
    position: relative;
    height: 100%;
    width: 100%;
    &::before {
      content: "";
      position: absolute;
      left: -56px;
      top: -28px;
      right: -10px;
      bottom: -42px;
      background-image: url(@/assets/imgs/texture_enterprise_info.png);
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
}
</style>
